<template>
	<div id="reset">
		<el-form :rules="rules" style="max-width: 800px!important;" ref="form" :model="form" label-width="120px">
			<el-form-item
					label="当前密码"
					prop="old_pwd"
			>
				<el-input type="password" style="max-width: 300px" v-model="form.old_pwd" placeholder="请输入您的当前密码"></el-input>
			</el-form-item>
			<el-form-item
					label="新的密码"
					prop="new_password"
			>
				<el-input type="password" style="max-width: 300px" v-model="form.new_password" placeholder="请设置您的新密码"></el-input>
			</el-form-item>
			<el-form-item
					label="确认新的密码"
					prop="new_pwd"
			>
				<el-input type="password" style="max-width: 300px" v-model="form.new_pwd" placeholder="请再次输入您的新密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="check" :loading="saving" @click="submit">提交修改</el-button>
				<el-button @click="reset" icon="close">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import Vue from "vue"
	import ElementUI from 'element-ui';
	import request from 'winged/utils/axios'
	Vue.use(ElementUI);
	export default{
		name:'reset-password-form',
		props:{
			token:{
				type:String,
				default:''
			}
		},
		data(){
			var valoldPass = (rule, value, callback) => {//正则检验密码
				if (/^[\w~`!@#$%^&*\(\)_\-+=\{\}\[\]|;:<>.\?\/]{6,20}$/.test( value )){
					callback()
				}else {
					callback(new Error('密码必须为6-20个字符，只能包含大小写字母、数字以及标点符号（空格、引号以及逗号除外）'));
				}
			};
			var validatePass2 = (rule, value, callback) => {//检验两次密码一致
				if (value === '') {
					callback(new Error('请再次输入新密码'));
				} else if (value !== this.form.new_password) {
					callback(new Error('两次输入密码不一致，请重新输入'));
				} else {
					callback();
				}
			};
			return{
				form:{
					_token:this.token,
					old_pwd: '',
					new_pwd: '',
					new_password:'',//接口不必传
				},
				saving: false,
				rules:{
					old_pwd:[
						{  required: true, message: '请输入您的当前密码', trigger: 'blur' },
						{ validator: valoldPass, trigger: 'blur' }
						],
					new_password:[
						{  required: true, message: '请输入您的新密码', trigger: 'blur' },
						{ validator: valoldPass, trigger: 'blur' }
						],
					new_pwd: [
						{  required: true, message: '请确认您的新密码', trigger: 'blur' },
						{ validator: validatePass2, trigger: 'blur' }
					],
				},
			};

		},
		methods:{
			submit : function() {
				this.$refs.form.validate((valid) => {
					if(valid){
						this.saving = true;
						request('auth/reset','post', this.form, false, (data)=> {
							if (data.status==200){
								this.saving = false;
								this.$message.success('修改密码成功');
								setTimeout(function(){
									window.location.reload();
								},3300);
							}
							else {
								this.saving = false;
								if (data.msg == 'PASSWORD_INVALID'){
									this.$message.error('当前密码错误，请填写正确的当前密码');
								}
							}
						}, (error)=> {
							this.saving = false;
							this.$message.error('修改密码失败');
						},true);
					}
				})
			},
			reset:function () {
				window.history.go(-1);
			}
		}
	}
</script>
<style >
</style>